<template>
    <div
        class="w-full text-center text-[10px] text-text--secondary leading-[10px] -translate-y-[100%] pb-[6px]">
        © 2021 MRC International Group Limited. All rights reserved.
        <br v-if="mobile" />
        <span class="text-primary cursor-pointer" @click="handleShowDialog(1)">Privacy Policy</span> and <span
            class="text-primary cursor-pointer" @click="handleShowDialog(2)">Term of Use</span>.
    </div>

    <mrc_ess_MyDialog fullscreen ref="dialogRef1" title="Privacy Policy">
        <div class="my-edit-form pa-6">
            <mrc_ess_RichTextHtml text="Privacy Policy"></mrc_ess_RichTextHtml>
        </div>
    </mrc_ess_MyDialog>
    <mrc_ess_MyDialog fullscreen ref="dialogRef2" title="Term of Use">
        <div class="my-edit-form pa-6">
            <mrc_ess_RichTextHtml text="Term of Use"></mrc_ess_RichTextHtml>
        </div>
    </mrc_ess_MyDialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()

const dialogRef1 = ref<any>(null);
const dialogRef2 = ref<any>(null);

function handleShowDialog(target: number) {
    if (target === 1) {
        dialogRef1.value.open();
    } else if (target === 2) {
        dialogRef2.value.open();
    }
}
</script>

<style scoped></style>